<template>
  <div>
    <el-input v-model="val"></el-input>
    <div @click.stop="myLog('1')">
      <div @click.stop="myLog('2')">
        <div @click.stop="myLog('3')">检查事件流</div>
      </div>
    </div>
    <my-child :name="name"></my-child>
    <child-two></child-two>
  </div>
</template>
<script>
import myChild from "./my-child.vue";
import childTwo from "./child-two.vue";
export default {
  components: {
    myChild,
    childTwo,
  },
  data() {
    return {
      val: "",
      name: "hello world",
    };
  },
  created() {
    console.log("hello created");
    this.aaa = "hello world";
    this.name = "hello name created";
  },
  mounted() {
    this.name = "hello name mounted";
  },
  watch: {
    val: {
      handler() {
        console.log("hello watch");
      },
      immediate: true,
    },
    aaa() {
      console.log(this.aaa);
    },
  },
  methods: {
    myLog(num) {
      console.log(num);
      this.aaa = "hello";
    },
  },
};
</script>
